<template>
  <div class="sec_wrap">
    <div class="sec_title">
      <h1>最新专题</h1>
    </div>
    <div class="sec_list">
      <div class="sec_one" v-for="item in secList" :key="item.id">
        <img :src="item.cover" alt="" />
        <div class="sname">{{ item.title }}</div>
        <div class="sdesc">{{ item.summary.substr(0, 6) }}</div>
        <div class="sprice">￥{{ item.lowestPrice }}</div>
        <div class="sec_goods">
          <div>
            <i class="iconfont icon-zan"> </i>
            <span>{{ item.collectNum }}</span>
            <i class="iconfont icon-yanjing"> </i>
            <span>{{ item.viewNum }}</span>
          </div>
          <div>
            <i class="iconfont icon-pinglun"></i>
            <span>{{ item.replyNum }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { _getNewSection } from '../../../api/home'
export default {
  data () {
    return {
      secList: []
    }
  },
  created () {
    // 最新专题接口调用
    _getNewSection(3).then(res => {
      console.log(res)
      this.secList = res.data.result
    })
  }
}
</script>
<style lang="less">
.sec_wrap {
  width: 1240px;
  margin: 0 auto;
  .sec_title {
    line-height: 80px;
  }
  .sec_list {
    height: 380px;
    width: 1240px;
    display: flex;
    justify-content: space-between;
    .sec_one {
      width: 404px;
      height: 380px;
      position: relative;
      border: 1px solid #e5e5e5;
      &:hover {
        box-shadow: 2px 2px 2px #ccc;
        transform: scale(1.005);
      }
      img {
        width: 404px;
        height: 288px;
      }
      .sname {
        color: white;
        font-size: 22px;
        position: absolute;
        top: 210px;
        left: 10px;
      }
      .sdesc {
        color: #ccc;
        position: absolute;
        top: 250px;
        left: 10px;
      }
      .sprice {
        padding: 0 15px;
        color: red;
        line-height: 28px;
        position: absolute;
        top: 240px;
        right: 10px;
        background: white;
      }
      .sec_goods {
        display: flex;
        justify-content: space-between;
        * {
          margin-right: 10px;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
